<template>
  <div id="app" :class="[getTheme]">
    <Header @tools="changePages"/>
    <div class="container">
      <EventAdd></EventAdd>
      <EventList></EventList>
      <Sidebar 
        :is-show="tools"
        @opentheme="theme = true; tools = false;"
        @cleardialog="clearData"
        @uploadData="uploadData"
        @opentable="table = true; tools = false"
      ></Sidebar>

      <Theme :is-show="theme"/>
      <transition name="dialog">
        <Dialog v-show="dialog" :msg="tips" @cancel="dialog = false" @sure="sureDialog"/>
      </transition>

      <EventTable :is-show="table" @deldialog="delData"/>
    </div>
  </div>
</template>

<script>
import Header from './components/Header'
import EventAdd from './components/EventAdd.vue'
import EventList from './components/EventList'
import Sidebar from './components/Sidebar'
import Theme from './components/Theme'
import Dialog from './components/Dialog'
import EventTable from './components/EventTable'
export default {
  name: 'App',
  components: {
    Header,
    EventAdd,
    EventList,
    Sidebar,
    Theme,
    Dialog,
    EventTable,
  },
  data() {
    // tools 是sidebar    theme是切换主题颜色侧边栏 dialog是 控制是否弹出对话框
    // tips存储传给dialog中的content的文字 dialog_type存一下操作类型 更加严谨
    return {
      tools: false,
      theme: false,
      dialog: false,
      table: false,
      tips: '',
      dialog_type: '',
      del_info: {
        index: 0,
        id: 0
      }
    }
  },
  computed: {
    // 获取主体颜色
    getTheme() {
      return this.$store.getters.getTheme
    }
  },
  methods: {
    changePages() {
      if(this.table) {
        this.table = !this.table
      }else if(this.theme) {
        this.theme = !this.theme
      }else {
        this.tools = !this.tools
      }
    },
    clearData() {
      // clearData是子dialog传过来的 点击后 弹出对话框（所以dialog为true 然后侧边栏肯定也要收缩） 
      // 弹出对话框 点击取消 dialog为flase 点击确定 删除数据 
      this.tools = false
      this.dialog = true
      this.dialog_type = 'clear'
      this.tips = '清空后，无法恢复，确认清空吗？!'
    },
    delData(index, id) {
      this.dialog = true
      this.dialog_type = 'del'
      this.tips = '删除后，无法恢复，确认删除吗？!'
      this.del_info = {
        index: index,
        id: id
      }
    },
    // 点击清除数据 弹出对话框中的确定 删除所有数据
    sureDialog() {
      const that = this
      switch(that.dialog_type) {
        case 'clear': 
          that.$store.dispatch('clearevent')
          that.$toast('清除数据成功')
          break
        case 'del': 
          that.$store.dispatch('delevent', that.del_info)
          that.$toast('删除成功')
      }
      if(that.dialog_type == 'clear') {
        that.$store.dispatch('clearevent')
        that.$toast('清除数据成功')
      }

      // 点击确定后 对话框不显示
      this.dialog = false
    },

    // 点击导入数据
    uploadData() {
      this.tools= false
      this.dialog = true
      this.dialog_type = 'upload'
      this.tips = 'upload'
    }
  }
}
</script>

<style lang="scss" src="../static/theme.scss"></style>
<style lang="scss">
:root {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}



.container {
  width:100%;
  padding: 2em 1em;
  max-width:800px;
  margin:auto;
}

.dialog-enter-active, .dialog-leave-active {
  transition: opacity .3s;
}
.dialog-enter, .dialog-leave-to{
  opacity: 0;
}


</style>
